<template>
  <div style="margin: 0; padding: 0">
    <ElTabs
      @tab-click="handleClick"
      v-model="activeName"
      tab-position="left"
      type="border-card"
      class="demo-tabs"
      style="height: 97vh;height: auto;"
      :stretch="true"
    >
      <ElTabPane name="1" label="帖子管理">
        <div>
          <ElTable :data="list" border v-loading="loading">
            <ElTableColumn
              prop="message.title"
              label="帖子标题"
            ></ElTableColumn>
            <ElTableColumn prop="message.info" label="内容"></ElTableColumn>
            <ElTableColumn
              prop="user.user.username"
              label="发布的用户"
            ></ElTableColumn>
            <ElTableColumn
              prop="message.lastupdate"
              label="发布的时间"
            ></ElTableColumn>
            <ElTableColumn label="操作">
              <template #default="s">
                <ElButton type="danger" round>删除</ElButton>
              </template>
            </ElTableColumn>
          </ElTable>
          <div style="display: flex;justify-content: center;padding-top: 20px ;"> <Pagination :page="page" @change="query"></Pagination></div>
        </div>
      </ElTabPane>
      <ElTabPane name="2" label="用户管理">user</ElTabPane>
      <ElTabPane name="3" label="新闻管理">xinwen</ElTabPane>
    </ElTabs>
  </div>
</template>

<script setup>
import {
  ElButton,
  ElMessage,
  ElTable,
  ElTableColumn,
  ElTabPane,
  ElTabs,
} from 'element-plus';
import { ref } from 'vue';
import Api from '../../script/Api';
import Pagination from '../../comment/Pagination.vue';

const activeName = ref('1');

const handleClick = (tab, event) => {
  console.log(tab);
};

//#region 帖子查询
const queryInfo = ref({
  title: '',
  info: '',
});

const page = ref({
  pageNum: 1,
  pageSize: 5,
  order: -1,
});
const list = ref([]);
const loading = ref(false);
const query = () => {
  loading.value = true;
  Api.get(
    `/message/query/${page.value.pageNum}/${page.value.pageSize}/${page.value.order}`,
    queryInfo.value,
    (data) => {
      if (data.success) {
        loading.value = false;
        list.value = data.data;
        page.value = data.pageBean;
      } else {
        ElMessage.error(data.message);
        loading.value = false;
      }
    }
  );
};
query();

//#endregion
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>
